TagManager = function( domElem )
{
    ///////////////////////////////////////////////////////////////////////////
    // private functions
    ///////////////////////////////////////////////////////////////////////////
    this.onClick = function( event )
    {
        var tagManager = event.currentTarget.tagManager;
        var curID      = event.currentTarget.id;

        tagManager.m_tags[curID].state = !tagManager.m_tags[curID].state;
        tagManager.updateElemView( curID );

        //alert('tag trigger');
        $(tagManager).trigger( 'onchange', [curID, tagManager.m_tags[curID].state] );
    }

    this.updateElemView = function( tag_id )
    {
        var tagElem = null;
        for ( var k = 0; k < this.m_domElem.childNodes.length; k++ )
        {
            if ( this.m_domElem.childNodes[k].id == tag_id )
            {
                tagElem = this.m_domElem.childNodes[k];
                break;
            }
        }

        if ( tagElem == null ) return;

        if (this.m_tags[tag_id].state)
            // tagElem.style.color = TagManager.ACTIVE_FONT_COLOR;
            $(tagElem).removeClass( "inactive_tag" ).addClass("active_tag");
        else
            // tagElem.style.color = TagManager.INACTIVE_FONT_COLOR;
            $(tagElem).removeClass( "active_tag" ).addClass("inactive_tag");
    }
    
    ///////////////////////////////////////////////////////////////////////////
    // private functions
    ///////////////////////////////////////////////////////////////////////////
    this.m_tags = [];
    this.m_domElem = domElem;

    domElem.innerHTML = '';
}

// TagManager.ACTIVE_FONT_COLOR   = "#000000";
// TagManager.INACTIVE_FONT_COLOR = "#aaaaaa";

TagManager.prototype.setTagList = function( tagList, initialState )
{
    if ( tagList.length == 0 )
        this.m_domElem.innerHTML = 'No tags';

    for ( var k = 0; k < tagList.length; k++ )
    {
        var curState = true;
        if ( typeof(tagList[k].state) != 'undefined' )
            curState = tagList[k].state;
        else if ( typeof( initialState ) != 'undefined' )
            curState = initialState;

        this.m_tags[tagList[k].id] = { state: curState, tag: tagList[k].tag };

        var curTagElem = document.createElement('b');
        var delim = document.createTextNode(" ");
        curTagElem.id = tagList[k].id;
        curTagElem.innerHTML = tagList[k].tag;
        // curTagElem.style.backgroundColor = "#009999";
        curTagElem.onclick = this.onClick;
        curTagElem.tagManager = this;
        this.m_domElem.appendChild( curTagElem );
        this.m_domElem.appendChild( delim );
        this.updateElemView( tagList[k].id );
    }
    
    //alert('tag trigger initial');
    $(this).trigger( 'onchange', [null, null] );
}

TagManager.prototype.getStateByID = function( tag_id )
{
    return this.m_tags[ tag_id ].state;
}

TagManager.prototype.getActiveIDs = function()
{
    var listActive = [];
    for (var k in this.m_tags)
        if ( this.m_tags[k].state )
            listActive.push(k);
    return listActive;
}